<!DOCTYPE HTML>
<html lang="ko">
<head>
<title>Gift | Galaxy Tab S</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="./css/m_tab_s.css" media="all">
<script type="text/javascript" src="./js/jQuery.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/m_tab_s.js"></script>
</head>
<body class="gxm-main-body">

<div class="gxm-wp">
	<div class="gxm-main">
		<div class="main-slide" id="mainSlider">
			<div class="main-slide-wrap">
				<p><img src="./images/main/photo_main.jpg" usemap="#tabs_main" alt="S아몰레드로 세상을 다시 보다. Samsung Galaxy Tab S." /></p>
			</div>
		</div>
		<map name="tabs_main" id="tabs_main">
			<area shape="rect" href="#" id="viewMovie" coords="32,208,267,247" alt="갤럭시 탭S 글로벌 영상 보기">
		</map>
	</div><!-- // gxm-main -->
	<div class="menu-link">
		<ul>
			<li><a href="./m_product_tab_s.html"><img src="./images/main/menu_features.png" alt="Features" /></a></li>
			<li><a href="./m_gift.html"><img src="./images/main/menu_gift.png" alt="Galaxy Gifts" /></a></li>
			<!-- 7-11 이전에 숨김 처리 -->
			<li><a href="#" target="_blank"><img src="./images/main/menu_cinema.png" alt="S 아몰레드 시네마" /></a></li>
			<!--// 7-11 이전에 숨김 처리 -->
			<li><a href="./m_event.html"><img src="./images/main/menu_event.png" alt="Event" /></a></li>
		</ul>
	</div>
</div><!-- // gxm-wp -->

<!-- movie layer -->
<div class="movie-layer" id="movieLayer" style="display:none;">
	<h2 class="title"><img src="./images/main/movie_title.gif" alt="삼성 갤럭시 탭S 글로벌 영상" /></h2>
	<div class="movie-big">
		<iframe width="100%" height="100%" frameborder="0" title="Samsung GALAXY Tab S youtube video" allowfullscreen="" src="" id="bigVideo"></iframe>
	</div>
	<div class="thumb-swipe" id="movieSlider">
		<div class="swipe-wrap">
			<div class="swipe-item">
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_1.jpg" alt="" /><span class="subs"><strong>영상 제목 1</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_2.jpg" alt="" /><span class="subs"><strong>영상 제목 2<br>긴경우 줄바꿈</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_3.jpg" alt="" /><span class="subs"><strong>영상 제목 3</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_4.jpg" alt="" /><span class="subs"><strong>영상 제목 4</strong></span></a>
			</div>
			<div class="swipe-item">
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_1.jpg" alt="" /><span class="subs"><strong>영상 제목 5</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_2.jpg" alt="" /><span class="subs"><strong>영상 제목 6</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_3.jpg" alt="" /><span class="subs"><strong>영상 제목 7</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_4.jpg" alt="" /><span class="subs"><strong>영상 제목 8</strong></span></a>
			</div>
			<div class="swipe-item">
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_1.jpg" alt="" /><span class="subs"><strong>영상 제목 9</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_2.jpg" alt="" /><span class="subs"><strong>영상 제목 10</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_3.jpg" alt="" /><span class="subs"><strong>영상 제목 11</strong></span></a>
				<a href="http://www.youtube.com/embed/Ej4qLobfDoM"><img src="./images/main/thumb_3.jpg" alt="" /><span class="subs"><strong>영상 제목 12</strong></span></a>
			</div>
		</div>
	</div>
	<p class="pager" id="slidePager">
		<span class="item">1</span>
		<span class="item">2</span>
		<span class="item">3</span>
	</p>
	<a href="#" class="close"><img src="./images/main/movie_close.png" alt="레이어 닫기" /></a>
</div>
<!--// movie layer -->


<script>
$(document).ready(function(){
	$('img[usemap]').rwdImageMaps();

	var Mslider;
	var bullets = document.getElementById('slidePager').getElementsByTagName('span');
	bullets[0].className = 'on';

	var closeMov = function() {
		$('#bigVideo').attr('src','');
	};
	var playMov = function(url) {
		$('#bigVideo').attr('src', url + '?controls=1&autoplay=1');
	};

	$('#movieSlider a').on('click', function(){
		$('#movieSlider a').removeClass('on');
		$(this).addClass('on');
		movID = $(this).attr('href');
		playMov(movID);
		return false;
	});

	$('#viewMovie').on('click', function(){
		$('#movieLayer').fadeIn({
			start:  function(){
				Mslider = new Swipe(document.getElementById('movieSlider'), {
					continuous: true,
					speed: 400,
					callback: function(e, pos) {
						
						console.log($(pos).index());
						var i = bullets.length;
						while (i--) {
							bullets[i].className = ' ';
						}
						bullets[$(pos).index()].className = 'on';
					}
				});
				$('#movieSlider a').removeClass('on');

				$('#movieLayer .close').on('click', function(){
					closeMov();
					$('#movieLayer').hide();
				});
			},
			done: function(){
				$('#movieSlider a').eq(0).addClass('on');
				$('#movieSlider a').eq(0).click();
			}
		});
		
	});
});
</script>
</body>
</html>